<script setup>
import { reactive,ref, watch } from 'vue';
import Card from '../components/Card.vue';
import useSearchProjecValue from '../hooks/useSearchProjecValue';
import SelectBlock from '../components/SelectBlock.vue';
import RadioBlock from '../components/RadioBlock.vue';
import useMessage from '../hooks/useMessage';
import { useCreateProject } from '../api/project';
import router from '../router/router';
const {typeOption,statusOption,VisibleOptions} = useSearchProjecValue()
VisibleOptions.push({
    value:0,
    text:"不公开"
})

const project = reactive({
    name: "",
    introduce: "",
    tags: "",
    type: 0,
    status:0,
    visible: 1,
    member_visible: 1,
    plans_visible: 1,
    logs_visible: 1,
})
//当子可见性大于项目总体可见性时发出警告
watch([()=>project.visible,()=>project.logs_visible,()=>project.member_visible,()=>project.plans_visible],(value)=>{
    ["logs_visible","member_visible","plans_visible"].forEach(value=>{
        if(project.visible<project[value]){
            useMessage("不可大于项目可见性","warning")
            project[value] = project.visible
        }
    })
})
//标签效验规则 不能大于10个标签
const tagsValidator = value=>value.split(" ").length<=10;

//提交
const onSubmit = () => {
    useCreateProject(project).then(res=>{
        router.push("/project/detail/"+res.data.pid)
    })
}
</script>

<template>
    <div class="container">
        <van-form @submit="onSubmit" label-width="4em" >
            <van-cell-group inset >
                <van-field
                    v-model="project.name"
                    :maxlength="50"
                    name="name"
                    label="项目名称"
                    placeholder="请输入项目名称"
                    :rules="[{ required: true , message: '不能为空' }]"
                />
                <van-field
                    v-model="project.introduce"
                    autosize
                    :maxlength="1000"
                    type="textarea"
                    name="introduce"
                    label="介绍"
                    placeholder="请输入介绍"
                />
                <van-field
                    v-model="project.tags"
                    autosize
                    :maxlength="200"
                    type="textarea"
                    name="tags"
                    label="标签"
                    placeholder="设置标签让更多人看到，不同标签请用空格隔开"
                    :rules="[{ validator:tagsValidator , message: '标签不能多于10个' }]"
                />
                <van-field name="type" label="项目类型">
                <template #input>
                    <RadioBlock :list="typeOption" v-model:value="project.type"></RadioBlock>
                </template>
                </van-field>
                <van-field name="status" label="项目状态">
                <template #input>
                    <RadioBlock :list="statusOption" v-model:value="project.status"></RadioBlock>
                </template>
                </van-field>
                <van-field name="status" label="项目可见">
                <template #input>
                    <RadioBlock :list="VisibleOptions" v-model:value="project.visible"></RadioBlock>
                </template>
                </van-field>
                <van-field name="status" label="日志可见">
                <template #input>
                    <RadioBlock :list="VisibleOptions" v-model:value="project.logs_visible"></RadioBlock>
                </template>
                </van-field>
                <van-field name="status" label="成员可见">
                <template #input>
                    <RadioBlock :list="VisibleOptions" v-model:value="project.member_visible"></RadioBlock>
                </template>
                </van-field>
                <van-field name="status" label="计划可见">
                <template #input>
                    <RadioBlock :list="VisibleOptions" v-model:value="project.plans_visible"></RadioBlock>
                </template>
                </van-field>

            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<style scoped>
.container{
    background-color: var(--main-background-color);
    padding: var(--page-padding) 0px;
    min-height: 100%;
}
</style>